<template>
  <div class="soubg">
    <div class="sou">
      <!--Begin 所在收货地区 Begin-->
      <span class="s_city_b">
        <span class="fl">送货至：</span>
        <span class="s_city">
          <span>四川</span>
          <div class="s_city_bg">
            <div class="s_city_t"></div>
            <div class="s_city_c">
              <h2>请选择所在的收货地区</h2>
              <table
                border="0"
                class="c_tab"
                style="width: 235px; margin-top: 10px"
                cellspacing="0"
                cellpadding="0"
              >
                <tr>
                  <th>A</th>
                  <td class="c_h"><span>安徽</span><span>澳门</span></td>
                </tr>
                <tr>
                  <th>B</th>
                  <td class="c_h"><span>北京</span></td>
                </tr>
                <tr>
                  <th>C</th>
                  <td class="c_h"><span>重庆</span></td>
                </tr>
                <tr>
                  <th>F</th>
                  <td class="c_h"><span>福建</span></td>
                </tr>
                <tr>
                  <th>G</th>
                  <td class="c_h">
                    <span>广东</span><span>广西</span><span>贵州</span
                    ><span>甘肃</span>
                  </td>
                </tr>
                <tr>
                  <th>H</th>
                  <td class="c_h">
                    <span>河北</span><span>河南</span><span>黑龙江</span
                    ><span>海南</span><span>湖北</span><span>湖南</span>
                  </td>
                </tr>
                <tr>
                  <th>J</th>
                  <td class="c_h">
                    <span>江苏</span><span>吉林</span><span>江西</span>
                  </td>
                </tr>
                <tr>
                  <th>L</th>
                  <td class="c_h"><span>辽宁</span></td>
                </tr>
                <tr>
                  <th>N</th>
                  <td class="c_h"><span>内蒙古</span><span>宁夏</span></td>
                </tr>
                <tr>
                  <th>Q</th>
                  <td class="c_h"><span>青海</span></td>
                </tr>
                <tr>
                  <th>S</th>
                  <td class="c_h">
                    <span>上海</span><span>山东</span><span>山西</span
                    ><span class="c_check">四川</span><span>陕西</span>
                  </td>
                </tr>
                <tr>
                  <th>T</th>
                  <td class="c_h"><span>台湾</span><span>天津</span></td>
                </tr>
                <tr>
                  <th>X</th>
                  <td class="c_h">
                    <span>西藏</span><span>香港</span><span>新疆</span>
                  </td>
                </tr>
                <tr>
                  <th>Y</th>
                  <td class="c_h"><span>云南</span></td>
                </tr>
                <tr>
                  <th>Z</th>
                  <td class="c_h"><span>浙江</span></td>
                </tr>
              </table>
            </div>
          </div>
        </span>
      </span>
      <!--End 所在收货地区 End-->
      <span class="fr">
        <span class="fl" v-if="!isLogin">
          你好，请
          <a href="" @click.prevent="toLogin()">登录</a>&nbsp;
          <a href="" style="color: #ff4e00" @click.prevent="toRegister()"
            >免费注册</a
          >&nbsp;
        </span>
        <span v-if="isLogin" class="fl">
          欢迎使用EZbuy:
          <span style="color: #ff4e00">{{ userName }}</span
          >||
          <span style="color: red" @click="Exit">退出登录</span>
        </span>
        <span
          >|&nbsp;<a href="#" @click.prevent="toUserOrderList">我的订单</a
          >&nbsp;|</span
        >
        <span class="ss">
          <div class="ss_list">
            <a href="#">收藏夹</a>
            <div class="ss_list_bg">
              <div class="s_city_t"></div>
              <div class="ss_list_c">
                <ul>
                  <li>
                    <a href="#" @click.prevent="toUserFavoriteList"
                      >我的收藏夹</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="ss_list">
            <a href="#">网站导航</a>
            <div class="ss_list_bg">
              <div class="s_city_t"></div>
              <div class="ss_list_c">
                <ul>
                  <li><a href="#" @click.prevent="toUserMsg">个人信息</a></li>
                  <li><a href="#" @click.prevent="toIndex">网站首页</a></li>
                </ul>
              </div>
            </div>
          </div>
        </span>
        <span class="fl">|&nbsp;关注我们：</span>
        <span class="s_sh">
          <a href="#" class="sh1">新浪</a>
          <a href="#" class="sh2">微信</a>
        </span>
        <span class="fr"
          >|&nbsp;<a href="#"
            >手机版&nbsp;<img
              :src="require('@/assets/images/s_tel.png')"
              align="absmiddle" /></a
        ></span>
      </span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapMutations } from "vuex";
export default {
  name: "HeaderNav",
  data() {
    return {
      userName: "",
      isLogin: false,
    };
  },
  methods: {
    ...mapMutations(["setShowPage"]),

    toLogin: function () {
      this.setShowPage(1);
      this.$router.push({
        name: "login",
      });
    },

    toRegister() {
      this.setShowPage(1);
      this.$router.push({
        name: "Register",
      });
    },
    async Exit() {
      const confirmExit = confirm(
        `确定要退出${window.sessionStorage.getItem("userName")} 的用户吗？`
      );
      if (!confirmExit) return;
      try {
        const response = await axios.get(
          `/api/user/logout`
        );
        console.log("退出信息", response);
        if (response.data.code == 200) {
          sessionStorage.clear();
          // 更新组件状态
          this.isLogin = false;
          this.userName = "";
          await this.$store.dispatch('clearShoppingCart');

          // 如果当前不是首页，则跳转到首页
          if (this.$route.path !== "/") {
            this.$router.push("/");
          } else {
            this.$forceUpdate();
          }
        }
      } catch (error) {
        console.log("退出失败信息：", error);
        alert("退出失败请重试");
      }
    },
    toUserMsg() {
      this.$router.push({ name: "userMsg" });
    },
    toIndex() {
      this.$router.push({ name: "index" });
    },
    toUserFavoriteList() {
      this.$router.push({ name: "UserFavoriteList" });
    },
    toUserOrderList() {
      this.$router.push({ name: "UserOrderList" });
    },
  },
  created() {
    this.userName = window.sessionStorage.getItem("userName");
    if (this.userName != null) {
      this.isLogin = true;
    }
  },
};
</script>

<style>
</style>